import 'package:pacsun/components/sheet.dart';
import 'package:pacsun/theme/app_colors.dart';
import 'package:pacsun/view/create/become/component/ProfileAvatar.dart';
import 'package:pacsun/view/create/become/component/swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';

String tempImage = '';

class ContentDetail extends StatelessWidget {
  final Map<String, dynamic> data;
  const ContentDetail({super.key, required this.data});

  @override
  Widget build(BuildContext context) {
    final bottomPadding = MediaQuery.of(context).padding.bottom;

    return SheetContainer(
      padding: EdgeInsets.all(0),
      bgImage: DecorationImage(
        image: AssetImage(
          data['img'],
        ),
        fit: BoxFit.cover,
      ),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0x99000000), // rgba(0, 0, 0, 0.6) 转换成 ARGB 格式
              Color(0xFF222222), // #222222
            ],
            stops: [0.001, 0.2861], // 0.1% 和 48.61% 转换为 0-1 范围
          ),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(height: 10.h),
            Row(
              children: [
                Spacer(),
                GestureDetector(
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: Container(
                    width: 24.w,
                    height: 24.h,
                    alignment: Alignment.center,
                    child: SvgPicture.asset(
                      'assets/icons/icon_close.svg',
                      width: 14.w,
                      height: 14.h,
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(width: 9.w)
              ],
            ),
            ProfileAvatar(proFileUrl: data['proFile'] ?? ''),
            SizedBox(height: 6.h),
            Text(
              'Michelle Bonita',
              style: customTextStyle(
                fontSize: 12,
                fontWeight: 500,
                height: 18 / 12,
              ),
            ),
            SizedBox(height: 4.h),
            Row(
              spacing: 4.w,
              mainAxisAlignment: MainAxisAlignment.center,
              children: (data['tag'] as List<String>)
                  .map((e) => buildTag(e))
                  .toList(),
            ),
            SizedBox(height: 23.h),
            Container(
              // color: Color(0XFF222222),
              child: Column(
                children: [
                  Transform.translate(
                    offset: Offset(0, -16),
                    child: SizedBox(
                      width: 333.w,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '“',
                            style: customTextStyle(
                              fontSize: 25,
                              fontWeight: 500,
                              color: FamilyTextColor.yellow,
                            ),
                          ),
                          SizedBox(width: 11.w),
                          Expanded(
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Expanded(
                                  child: Text(
                                    data['content'],
                                    style: customTextStyle(
                                      fontSize: 12,
                                      fontWeight: 500,
                                      height: 1.3,
                                    ),
                                    // maxLines: 5,
                                  ),
                                ),
                                SizedBox(width: 4.w),
                                Transform.translate(
                                  offset: Offset(0, 9),
                                  child: Text(
                                    '“',
                                    style: customTextStyle(
                                      fontSize: 25,
                                      fontWeight: 500,
                                      color: FamilyTextColor.yellow,
                                    ),
                                  ),
                                )
                              ],
                            ),
                          ),
                          // 关键
                        ],
                      ),
                    ),
                  ),
                  Text(
                    'Creator Spotlight ✨',
                    style: customTextStyle(
                      fontSize: 18,
                      fontWeight: 700,
                      color: FamilyTextColor.yellow,
                    ),
                  ),
                  SizedBox(height: 16.h),
                  CustomImageSwiper(
                    imageList: [
                      data['img'],
                      'assets/imgs/img_inspriation2.png',
                      'assets/imgs/img_inspriation3.png',
                      'assets/imgs/img_inspriation4.png',
                    ],
                  ),
                  SizedBox(height: bottomPadding)
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget buildTag(String tag) {
    return IntrinsicWidth(
      child: Container(
        height: 15.h,
        padding: EdgeInsets.symmetric(horizontal: 6).r,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: Color(0XFFFFD400).withAlpha((255 * 0.3).floor()),
            borderRadius: BorderRadius.circular(12).r),
        child: Text(
          tag,
          style: customTextStyle(fontSize: 10, fontWeight: 500),
        ),
      ),
    );
  }
}
